<!doctype html>
<!--
  @license
  Copyright 2021 Google LLC
  SPDX-License-Identifier: BSD-3-Clause
-->
<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"
    />
    <title>Simple Animation</title>
  </head>
  <body>
    <my-element></my-element>
    <script type="module">
      import {LitElement, html, css} from 'lit';
      import {classMap} from 'lit/directives/class-map.js';
      import {
        animate,
        flyBelow,
        defaultCssProperties,
      } from '../development/animate.js';

      class MyElement extends LitElement {
        static properties = {shifted: {}};
        static styles = css`
          .box {
            --box-size: 250px;
            position: relative;
            background: steelblue;
            height: var(--box-size);
            width: var(--box-size);
            border-radius: 50%;
          }

          .shifted {
            left: calc(100% - var(--box-size));
          }
        `;

        render() {
          return html`
            <p><button @click=${this._toggle}>Move</button></p>
            <p
              class="box ${classMap({shifted: this.shifted})}"
              ${animate()}
            ></p>
          `;
        }

        _toggle() {
          this.shifted = !this.shifted;
        }
      }

      customElements.define('my-element', MyElement);
    </script>
  </body>
</html>
